<template>
    <div>
        <div class="filter">
            <el-form :inline="true" :model="formInline" ref="ruleForm">
                <el-form-item label="信息服务反馈标题" prop="title">
                    <el-input v-model="formInline.title" placeholder="请输入信息服务反馈标题"></el-input>
                </el-form-item>
                <el-form-item label="信息服务反馈内容" prop="content">
                    <el-input v-model="formInline.content" placeholder="请输入信息服务反馈内容"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table">
            <!-- <div class="add">
                <el-button type="primary" @click="add">新增服务反馈</el-button>
            </div> -->
            <div class="data">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="adminName" label="管理员名称">
                    </el-table-column>
                    <el-table-column prop="title" label="标题">
                    </el-table-column>
                    <el-table-column prop="content" label="内容" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="dealStatus" label="解决状态">
                        <template slot-scope="scope">
                            <el-radio-group v-model="scope.row.dealStatus" @change="changeDealStatus(scope.row)">
                                <el-radio :label="0">未解决</el-radio>
                                <el-radio :label="2">已解决</el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="getFeedbackById(scope.row.id)">编辑</el-button>
                            <el-button @click="deleteFeedback(scope.row.id)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.page" :page-sizes="[10, 20]" :page-size="pageInfo.size" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
            </el-pagination>
        </div>
        <el-dialog title="编辑服务反馈信息" width="600px" :visible.sync="dialogFormVisible" center>
            <el-form :model="editForm">
                <el-form-item label="服务反馈名称" label-width="100px">
                    <el-input v-model="editForm.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="服务反馈内容" label-width="100px">
                    <el-input type="textarea" :rows="4" v-model="editForm.content" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="commitEditForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import api from "../../../api";
export default {
    name: "service",
    data() {
        return {
            formInline: {
                title: "",
                content: "",
                type: 0,
            },
            pageInfo: {
                currentPage: 1,
                pageSize: 10,
                total: 0,
            },
            dialogFormVisible: false,
            editForm: {
                title: "",
                content: "",
                type: 0,
            },
            tableData: [],
            isAdd: true,
            dealStatus: 0,
        };
    },
    mounted() {
        this.getFeedbackList();
    },
    methods: {
        // 搜索
        onSubmit() {
            this.pageInfo.currentPage = 1;
            this.getFeedbackList();
        },
        // 重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 分页获取服务反馈数据
        async getFeedbackList() {
            try {
                const params = Object.assign(
                    {},
                    this.pageInfo,
                    this.formInline
                );
                const response = await api.notice.getFeedbackPage(params);
                if (response.data.code === 200) {
                    this.tableData = response.data.data.records;
                    this.pageInfo.total = response.data.data.total;
                } else {
                    this.$message.error(response.data.msg);
                }
            } catch (error) {
                this.$message.error(error);
            }
        },
        // 根据ID获取服务反馈
        async getFeedbackById(id) {
            this.isAdd = false;
            this.dialogFormVisible = true;
            try {
                const response = await api.notice.getFeedbackById({
                    feedbackId: id,
                });
                if (response.data.code === 200) {
                    this.editForm = response.data.data;
                } else {
                    this.$message.error(response.data.msg);
                }
            } catch (error) {
                this.$message.error(error);
            }
        },
        // 提交编辑服务反馈
        async commitEditForm() {
            try {
                const response = await api.notice.editFeedback(this.editForm);
                if (response.data.code === 200) {
                    this.dialogFormVisible = false;
                    this.$message.success("编辑成功");
                    this.getFeedbackList();
                } else {
                    this.$message.error(response.data.msg);
                }
            } catch (error) {
                this.$message.error(error);
            }
        },
        // 删除服务反馈
        deleteFeedback(id) {
            this.$confirm("确认删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    try {
                        const response = await api.notice.deleteFeedback({
                            feedbackId: id,
                        });
                        if (response.data.code === 200) {
                            this.$message.success("删除成功");
                            this.getFeedbackList();
                        } else {
                            this.$message.error(response.data.msg);
                        }
                    } catch (error) {
                        this.$message.error(error);
                    }
                })
                .catch(() => {});
        },
        /**
         * @description 改变解决状态
         */
        async changeDealStatus(val) {
            try {
                const response = await api.notice.updateDealStatus({
                    id: val.id,
                    dealStatus: val.dealStatus,
                });
                if (response.data.code === 200) {
                    this.$message.success("修改状态成功");
                    this.getFeedbackList();
                } else {
                    this.$message.error(response.data.msg);
                }
            } catch (error) {
                this.$message.error(error);
            }
        },
        handleSizeChange(val) {
            this.pageInfo.size = val;
            this.getFeedbackList();
        },
        handleCurrentChange(val) {
            this.pageInfo.currentPage = val;
            this.getFeedbackList();
        },
    },
};
</script>

<style lang='less' scoped>
</style>